<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/5/16
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax查询页面</title>
    <script type="text/javascript" src="static/jquery/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="static/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="static/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="static/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.css">
    <link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="static/paginationjs-master/dist/pagination.css" >
    <script language="javascript" type="text/javascript" src="static/paginationjs-master/dist/pagination.min.js"></script>

    <script type="text/javascript">


        function doAjax() {
            $.ajax({
                type: "post",
                url: "ajaxSelectAction",
                data: $("#formQuery").serialize(),
                dataType: "json",
                success: function(data) {
                    if(data){
                        $("#showBase").pagination({
                            dataSource: data,
                            pageSize: 5,
                            showGoInput: true,
                            showGoButton: true,
                            callback: function (eachData, pagination) {
                                // template method of yourself
                                var showDom = "";


                                $.each(eachData, function (i, dataMath) {
                                    showDom += "<tr>";


                                    showDom += " <th scope=\"row\">";
                                    showDom += "</th>";

                                    showDom += "<td>";
                                    showDom += (i + 1);
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += dataMath.username;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += dataMath.useraddress;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += dataMath.usertel;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += dataMath.regdate;
                                    showDom += "</td>";

                                    showDom += "</tr>";

                                });
                                $("#showData").html(showDom);
                            }
                        })

                    }

                }
            });




            //$("#showMsg").html(data)//document.getElementById("showMsg").innerHTML=xmlhttp.responseText;
        }




        function doAjax2() {
            $('#saveUpdateModal').modal('show')
            $('#btnUpdate').on("click", function () {
                $.ajax({

                    type: "post",
                    url: "ajaxAdd",
                    data: $("#formAdd").serialize(),
                    dataType: "json",
                    success: function (data) {
                    if(data && data == "ok"){
                        alert("更新成功")
                    }else{
                        alert("更新失败")
                    }
                        $('#saveUpdateModal').modal('hide');
                    }
                })
            })
        }
    </script>
</head>
<body>
<div style="padding-top: 40px">
    <form class="form-horizontal" id="formQuery">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userName" name="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userAddress" name="useraddress" placeholder="请输入地址">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">电话</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userTel" name="usertel" placeholder="请输入联系电话">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">注册时间</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="RegDate" name="regdate" placeholder="请输入注册时间">-
                <input type="text" class="form-control" id="RegDate2" name="regdate2" placeholder="请输入注册时间">
            </div>
        </div>



        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="doAjax()">查询</button>
                <button type="button" class="btn btn-default" onclick="doAjax2()">更新</button>
            </div>
        </div>
    </form>
</div>




<div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>ID</th>
            <th>用户名</th>
            <th>住址</th>
            <th>电话</th>
            <th>注册时间</th>
        </tr>
        </thead>
        <tbody id="showData">

        </tbody>
    </table>
    <div id="showBase"></div>
</div>
<%--        使用动态框--%>
<div class="modal fade" tabindex="-1" role="dialog" id="saveUpdateModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">用户信息新增和更新</h4>
            </div>
            <div class="modal-body">
                <div style="padding-top: 40px">
                    <form class="form-horizontal" id="formAdd" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Id</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="userIdUpdate" name="userid" placeholder="请输入编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="userNameUpdate" name="username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="userAddressUpdate" name="useraddress" placeholder="请输入地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="userTelUpdate" name="usertel" placeholder="请输入联系电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">注册时间</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="RegDateUpdate" name="Regdate" placeholder="请输入注册时间" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">

                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="userPswUpdate" name="userpsw" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="userpsw2" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="btnUpdate" class="btn btn-primary">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
